<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手书交易平台</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7fa;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 头部样式 */
        header {
            background: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo h1 {
            font-size: 24px;
            font-weight: 700;
        }
        
        .nav-links {
            display: flex;
            gap: 20px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 20px;
            transition: background-color 0.3s;
        }
        
        .nav-links a:hover {
            background-color: rgba(255,255,255,0.2);
        }
        
        .user-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        
        .btn-primary {
            background-color: #fff;
            color: #2196F3;
        }
        
        .btn-primary:hover {
            background-color: #f8f9fa;
            transform: translateY(-1px);
        }
        
        /* 搜索区域 */
        .search-section {
            background-color: white;
            padding: 20px;
            margin-top: -25px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            position: relative;
            z-index: 10;
        }
        
        .search-form {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .search-input {
            flex: 1;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 20px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .search-input:focus {
            border-color: #2196F3;
        }
        
        .category-select {
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 20px;
            font-size: 14px;
            outline: none;
            background-color: white;
            cursor: pointer;
            transition: border-color 0.3s;
        }
        
        .category-select:focus {
            border-color: #2196F3;
        }
        
        /* 主要内容 */
        .main-content {
            padding: 30px 0;
        }
        
        .section-title {
            margin-bottom: 20px;
        }
        
        .section-title h2 {
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
            position: relative;
            padding-bottom: 10px;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
            border-radius: 2px;
        }
        
        /* 书籍网格 */
        .books-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .book-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .book-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }
        
        .book-image {
            height: 200px;
            overflow: hidden;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .book-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .book-info {
            padding: 15px;
        }
        
        .book-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #2c3e50;
            line-height: 1.3;
            height: 40px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .book-author {
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .book-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .book-price {
            font-size: 20px;
            font-weight: 700;
            color: #e74c3c;
        }
        
        .book-condition {
            padding: 3px 8px;
            background-color: #e8f4fc;
            color: #3498db;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 500;
        }
        
        .book-actions {
            display: flex;
            gap: 8px;
        }
        
        .btn-view, .btn-contact {
            flex: 1;
            padding: 8px;
            font-size: 12px;
        }
        
        .btn-view {
            background-color: #2196F3;
            color: white;
        }
        
        .btn-contact {
            background-color: #4CAF50;
            color: white;
        }
        
        /* 分类导航 */
        .category-nav {
            background-color: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .category-nav ul {
            display: flex;
            gap: 15px;
            list-style: none;
            flex-wrap: wrap;
        }
        
        .category-nav li a {
            text-decoration: none;
            color: #666;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 14px;
            transition: all 0.3s;
            border: 1px solid #e0e0e0;
        }
        
        .category-nav li a:hover,
        .category-nav li a.active {
            background-color: #2196F3;
            color: white;
            border-color: #2196F3;
        }
        
        /* 发布按钮 */
        .publish-btn-container {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 100;
        }
        
        .publish-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2196F3 0%, #21CBF3 100%);
            color: white;
            border: none;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .publish-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(33, 150, 243, 0.5);
        }
        
        /* 模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: 700;
            color: #2c3e50;
        }
        
        .close-modal {
            font-size: 24px;
            background: none;
            border: none;
            cursor: pointer;
            color: #999;
            transition: color 0.3s;
        }
        
        .close-modal:hover {
            color: #333;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            border-color: #2196F3;
        }
        
        textarea.form-control {
            resize: vertical;
            min-height: 80px;
        }
        
        .form-actions {
            margin-top: 20px;
            text-align: right;
        }
        
        /* 页脚 */
        footer {
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            text-align: center;
        }
        
        .footer-content {
            font-size: 14px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 10px;
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
            }
            
            .search-form {
                flex-direction: column;
            }
            
            .search-input,
            .category-select {
                width: 100%;
            }
            
            .books-grid {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                gap: 15px;
            }
            
            .book-image {
                height: 150px;
            }
            
            .publish-btn {
                width: 50px;
                height: 50px;
                font-size: 20px;
                bottom: 20px;
                right: 20px;
            }
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1>校园二手书</h1>
                </div>
                <nav class="nav-links">
                    <a href="#" class="active">首页</a>
                    <a href="#">分类</a>
                    <a href="#">推荐</a>
                    <a href="#">关于我们</a>
                </nav>
                <div class="user-actions">
                    <button class="btn btn-primary" onclick="openLoginModal()">登录</button>
                </div>
            </div>
        </div>
    </header>

    <!-- 搜索区域 -->
    <div class="container">
        <div class="search-section">
            <form class="search-form" onsubmit="searchBooks(event)">
                <input type="text" class="search-input" id="searchInput" placeholder="搜索书名、作者或关键词...">
                <select class="category-select" id="categoryFilter">
                    <option value="all">全部分类</option>
                    <option value="textbook">教材教辅</option>
                    <option value="literature">文学小说</option>
                    <option value="science">科技类</option>
                    <option value="art">艺术类</option>
                    <option value="other">其他</option>
                </select>
                <button type="submit" class="btn btn-primary">搜索</button>
            </form>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="container">
        <div class="main-content">
            <!-- 分类导航 -->
            <div class="category-nav">
                <ul>
                    <li><a href="#" class="active">全部</a></li>
                    <li><a href="#">热门教材</a></li>
                    <li><a href="#">计算机类</a></li>
                    <li><a href="#">考研资料</a></li>
                    <li><a href="#">文学小说</a></li>
                    <li><a href="#">外语学习</a></li>
                    <li><a href="#">新书上架</a></li>
                </ul>
            </div>

            <!-- 书籍列表 -->
            <div class="section-title">
                <h2>热门书籍</h2>
            </div>
            <div class="books-grid" id="booksList">
                <!-- 书籍卡片将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- 发布按钮 -->
    <div class="publish-btn-container">
        <button class="publish-btn" onclick="openPublishModal()">+</button>
    </div>

    <!-- 发布书籍模态框 -->
    <div class="modal" id="publishModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">发布二手书</h3>
                <button class="close-modal" onclick="closePublishModal()">&times;</button>
            </div>
            <form id="publishForm" onsubmit="publishBook(event)">
                <div class="form-group">
                    <label for="bookTitle">书名</label>
                    <input type="text" class="form-control" id="bookTitle" required>
                </div>
                <div class="form-group">
                    <label for="bookAuthor">作者</label>
                    <input type="text" class="form-control" id="bookAuthor" required>
                </div>
                <div class="form-group">
                    <label for="bookCategory">分类</label>
                    <select class="form-control" id="bookCategory" required>
                        <option value="textbook">教材教辅</option>
                        <option value="literature">文学小说</option>
                        <option value="science">科技类</option>
                        <option value="art">艺术类</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="bookPrice">价格 (￥)</label>
                    <input type="number" class="form-control" id="bookPrice" min="0" step="0.1" required>
                </div>
                <div class="form-group">
                    <label for="bookCondition">成色</label>
                    <select class="form-control" id="bookCondition" required>
                        <option value="new">全新</option>
                        <option value="like-new">几乎全新</option>
                        <option value="good">良好</option>
                        <option value="fair">一般</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="bookDesc">描述</label>
                    <textarea class="form-control" id="bookDesc" required></textarea>
                </div>
                <div class="form-group">
                    <label for="contactInfo">联系方式</label>
                    <input type="text" class="form-control" id="contactInfo" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">发布</button>
                    <button type="button" class="btn" onclick="closePublishModal()">取消</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div class="modal" id="loginModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">用户登录</h3>
                <button class="close-modal" onclick="closeLoginModal()">&times;</button>
            </div>
            <form id="loginForm" onsubmit="login(event)">
                <div class="form-group">
                    <label for="username">用户名/学号</label>
                    <input type="text" class="form-control" id="username" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">登录</button>
                    <button type="button" class="btn" onclick="closeLoginModal()">取消</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 书籍详情模态框 -->
    <div class="modal" id="bookDetailModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">书籍详情</h3>
                <button class="close-modal" onclick="closeBookDetailModal()">&times;</button>
            </div>
            <div id="bookDetailContent">
                <!-- 详情内容将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <p>© 2023 校园二手书交易平台 | 让知识传递，让书籍流动</p>
            </div>
        </div>
    </footer>

    <script>
        // 模拟书籍数据
        const books = [
            {
                id: 1,
                title: "高等数学（第七版）",
                author: "同济大学数学系",
                price: 25,
                condition: "良好",
                category: "textbook",
                image: "https://picsum.photos/id/24/400/600",
                description: "高等教育出版社出版，适合理工科学生使用，有少量笔记。"
            },
            {
                id: 2,
                title: "算法导论（第三版）",
                author: "Thomas H. Cormen",
                price: 80,
                condition: "几乎全新",
                category: "science",
                image: "https://picsum.photos/id/42/400/600",
                description: "经典算法教材，英文版，保存完好。"
            },
            {
                id: 3,
                title: "平凡的世界",
                author: "路遥",
                price: 15,
                condition: "一般",
                category: "literature",
                image: "https://picsum.photos/id/65/400/600",
                description: "中国当代文学经典，有些许磨损。"
            },
            {
                id: 4,
                title: "C++ Primer Plus（第6版）",
                author: "Stephen Prata",
                price: 60,
                condition: "良好",
                category: "science",
                image: "https://picsum.photos/id/20/400/600",
                description: "C++编程入门经典，有少量标注。"
            },
            {
                id: 5,
                title: "大学英语四级词汇",
                author: "新东方出版社",
                price: 10,
                condition: "良好",
                category: "textbook",
                image: "https://picsum.photos/id/30/400/600",
                description: "英语四级备考词汇书，帮助记忆单词。"
            },
            {
                id: 6,
                title: "围城",
                author: "钱钟书",
                price: 12,
                condition: "几乎全新",
                category: "literature",
                image: "https://picsum.photos/id/50/400/600",
                description: "钱钟书代表作，保存完好。"
            },
            {
                id: 7,
                title: "数据结构与算法分析",
                author: "Mark Allen Weiss",
                price: 45,
                condition: "良好",
                category: "science",
                image: "https://picsum.photos/id/70/400/600",
                description: "计算机专业核心课程教材。"
            },
            {
                id: 8,
                title: "考研政治冲刺背诵手册",
                author: "徐涛",
                price: 20,
                condition: "良好",
                category: "textbook",
                image: "https://picsum.photos/id/90/400/600",
                description: "考研政治复习资料，有重点标注。"
            }
        ];

        // 渲染书籍列表
        function renderBooks(bookList) {
            const booksList = document.getElementById('booksList');
            booksList.innerHTML = '';
            
            bookList.forEach(book => {
                const bookCard = document.createElement('div');
                bookCard.className = 'book-card';
                bookCard.innerHTML = `
                    <div class="book-image">
                        <img src="${book.image}" alt="${book.title}">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">${book.title}</h3>
                        <p class="book-author">${book.author}</p>
                        <div class="book-meta">
                            <span class="book-price">￥${book.price}</span>
                            <span class="book-condition">${book.condition}</span>
                        </div>
                        <div class="book-actions">
                            <button class="btn btn-view" onclick="viewBookDetail(${book.id})">查看</button>
                            <button class="btn btn-contact" onclick="contactSeller(${book.id})">联系</button>
                        </div>
                    </div>
                `;
                booksList.appendChild(bookCard);
            });
        }

        // 搜索书籍
        function searchBooks(event) {
            event.preventDefault();
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            const category = document.getElementById('categoryFilter').value;
            
            let filteredBooks = books;
            
            if (searchTerm) {
                filteredBooks = filteredBooks.filter(book => 
                    book.title.toLowerCase().includes(searchTerm) || 
                    book.author.toLowerCase().includes(searchTerm)
                );
            }
            
            if (category !== 'all') {
                filteredBooks = filteredBooks.filter(book => book.category === category);
            }
            
            renderBooks(filteredBooks);
        }

        // 发布书籍
        function publishBook(event) {
            event.preventDefault();
            // 这里只是模拟发布功能
            alert('书籍发布成功！在实际应用中，这里会发送数据到服务器。');
            closePublishModal();
            document.getElementById('publishForm').reset();
        }

        // 登录
        function login(event) {
            event.preventDefault();
            // 这里只是模拟登录功能
            const username = document.getElementById('username').value;
            alert(`登录成功！欢迎 ${username}！`);
            closeLoginModal();
        }

        // 查看书籍详情
        function viewBookDetail(bookId) {
            const book = books.find(b => b.id === bookId);
            if (book) {
                const detailContent = document.getElementById('bookDetailContent');
                detailContent.innerHTML = `
                    <div style="display: flex; flex-direction: column; gap: 20px;">
                        <div style="text-align: center;">
                            <img src="${book.image}" alt="${book.title}" style="max-width: 200px; border-radius: 8px;">
                        </div>
                        <div>
                            <h3 style="font-size: 22px; font-weight: 700; margin-bottom: 10px;">${book.title}</h3>
                            <p style="color: #666; margin-bottom: 15px;">作者：${book.author}</p>
                            <div style="display: flex; gap: 30px; margin-bottom: 20px;">
                                <div>
                                    <span style="color: #999; font-size: 14px;">价格</span>
                                    <p style="font-size: 28px; font-weight: 700; color: #e74c3c;">￥${book.price}</p>
                                </div>
                                <div>
                                    <span style="color: #999; font-size: 14px;">成色</span>
                                    <p style="font-size: 18px; font-weight: 500; margin-top: 5px;">${book.condition}</p>
                                </div>
                            </div>
                            <div>
                                <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 10px;">书籍描述</h4>
                                <p style="line-height: 1.8; color: #333;">${book.description}</p>
                            </div>
                            <div style="margin-top: 20px; text-align: right;">
                                <button class="btn btn-primary" onclick="contactSeller(${book.id})")>联系卖家</button>
                            </div>
                        </div>
                    </div>
                `;
                document.getElementById('bookDetailModal').style.display = 'flex';
            }
        }

        // 联系卖家
        function contactSeller(bookId) {
            alert(`在实际应用中，这里会显示卖家联系方式或打开聊天窗口，书籍ID：${bookId}`);
        }

        // 模态框控制函数
        function openPublishModal() {
            document.getElementById('publishModal').style.display = 'flex';
        }

        function closePublishModal() {
            document.getElementById('publishModal').style.display = 'none';
        }

        function openLoginModal() {
            document.getElementById('loginModal').style.display = 'flex';
        }

        function closeLoginModal() {
            document.getElementById('loginModal').style.display = 'none';
        }

        function closeBookDetailModal() {
            document.getElementById('bookDetailModal').style.display = 'none';
        }

        // 点击模态框外部关闭模态框
        window.onclick = function(event) {
            const modals = [
                document.getElementById('publishModal'),
                document.getElementById('loginModal'),
                document.getElementById('bookDetailModal')
            ];
            
            modals.forEach(modal => {
                if (modal && event.target === modal) {
                    modal.style.display = 'none';
                }
            });
        }

        // 初始化页面
        window.onload = function() {
            renderBooks(books);
        }
    </script>
</body>
</html>